<script lang="ts" setup>
import { defineComponent, ref } from "vue";
import ColumnList from "@/components/ColumnList.vue";
import Slideshow from "@/components/Slideshow.vue";
import ThemeChoose from '@/components/ThemeChoose.vue';
import { getColumnsList } from "@/api/api";

    const list = ref([]);
    const page = ref(1);
    const size = 4;
    const isMoreBtn = ref(true);

    // 还不能解决@引用处理问题
    // const slideImgs = ['@/assets/images/slidePic1.png','@/assets/images/slidePic2.png','@/assets/images/slidePic3.png'];

    // 获取columns接口
    const getColumnsListReq = async function (page: number, size: number) {
      const { list: columnList, total } = await getColumnsList({ page, size });
      list.value = list.value.concat(columnList);
      if (page * size >= total) {
        // v-show为什么不生效
        isMoreBtn.value = false;
      }
    };

    getColumnsListReq(page.value, size);

</script>
<template>
  <article class="home-page">
    <!-- 中间图片部分 -->
    <!-- <div class="pic">
      <div class="pic-box">
        <img
          src="@/assets/callout.svg"
          alt="随心写作，自由创作"
          class="picture"
        />
        <h2 class="pic-tit">随心写作，自由表达</h2>
        <p class="pic-text">
          <router-link to="/createpost" class="btn btn-primary"
            >开始写文章</router-link
          >
        </p>
      </div>
    </div> -->
    <ThemeChoose class="theme"></ThemeChoose>
    <!-- 轮播图 -->
    <Slideshow></Slideshow>
    <div class="box" @click="handleClick"></div>

    <div class="text-center">发现精彩</div>
    <!-- 专栏部分 -->
    <section class="columnWrap">
      <ColumnList :list="list"></ColumnList>
    </section>

    <button
      class="btn btn-outline-primary more-btn"
      @click="getColumnsListReq(++page, size)"
      v-if="isMoreBtn"
    >
      加载更多
    </button>
  </article>
</template>
<style lang="scss">
.theme{
  height: 140px;
}
.home-page {
  padding-top: 20px;
  min-width: 1200px;
  padding-right: 1rem;
  padding-left: 1rem;
  margin-right: auto;
  margin-left: auto;
}
.pic {
  padding-top: 80px;
}
.pic-box {
  width: 60%;
  margin: 0 auto;
  text-align: center;
}
.picture {
  width: 50%;
}
.text-center {
  margin: 46px 0;
  text-align: center;
  background-image: linear-gradient(transparent 0%, #71b7dc 50%, transparent 100%);
  font-size: 36px;
  color: #fff;
}
.columnWrap {
  width: 1400px;
  margin: 0 auto;
}
.more-btn {
  margin: 0 auto;
  width: 260px;
  display: block;
}
</style>
